<template>
    <div class="bus-card-list" :style="{height: `${height}px`}">
        <div 
        class="list"
        v-for="item in Object.keys(optionData)"
        :key="optionData[item].id"
        v-show="active === optionData[item].id"
        :id="optionData[item].id"
        >
            <ul class="list-ul">
                <li
                v-for="(itemLi, index) in optionData[item].list"
                :key="index" 
                @click="chooseTemp({
                    tplNo: itemLi.tplNo,
                    tplName: itemLi.tplName,
                    tplType: itemLi.tplType,
                    tplDefault: itemLi.tplDefault,
                    tplImgUrl: itemLi.tplImgUrl,
                    customTxtItem: itemLi.customTxtItem,
                }, 'click')"
                class="list-li">
                    <!-- {{itemLi}} -->
                    <span v-if="itemLi.tplNo == actTempNo" class="selected">
                        <div class="triangle-bottomright">
                            <van-icon class="triangle-bottomright-icon" name="success" />
                        </div>
                    </span>
                    <image-vant :radius="5" :src="itemLi.tplImgUrl" :height="278" :width="159"/>
                    <div class="img-temp-name">{{itemLi.tplName}}</div>
                </li>
            </ul>
            <div :id="`${optionData[item].id}-empty`" class="empty-info"></div>
        </div>
    </div>
</template>

<script>
// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

// 自定义组件
import ImageVant from "_components/project/common/ImageVant"

// 自定义方法
import { getProImg } from "_projectFn/images"
import { getBusCardInfo } from "_network/request"
import { failTextVantToa } from "_projectFn/prompt"

// 本地图片
import scrollTop from '_assets/img/mescroll-totop.png'
import emptyContentImg from '_assets/img/empty-content-img.svg'

// UI组件
import { Icon } from 'vant'

import Vue from 'vue'

Vue.use(Icon)

export default {
    name: 'busCardListList',
    props: {
        option: {
            type: Object,
            default: {},
        },
        height: {
            type: Number,
            default: 500,
        },
        active: '',
        actTempNo: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            mescroll: {},
            img: {
                emptyContentIcon: getProImg('empty-content-img.svg', emptyContentImg),
                scrollTopIcon: getProImg('mescroll-totop.png', scrollTop),
            },
            commomTempList: []
        }
    },
    methods: {
        setUpLoadFn(id) {
            switch (id) {
                case 'all':
                    return this.allUpCallback
                    break;
                case 'man':
                    return this.manUpCallback
                    break;
                case 'women':
                    return this.womenUpCallback
                    break;
                default:
                    return this.allUpCallback
                    break;
            }
        },
        setDownLoadFn(id) {
            switch (id) {
                case 'all':
                    return this.allDownCallback
                    break;
                case 'man':
                    return this.manDownCallback
                    break;
                case 'women':
                    return this.womenDownCallback
                    break;
                default:
                    return this.allDownCallback
                    break;
            }
        },
        // 全部模板下拉重新加载
		allDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['all'].endErr()
                }
            })
		},
        // 男士下拉重新加载
		manDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['man'].endErr()
                }
            })
		},
        // 女士下拉重新加载
		womenDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['help'].endErr()
                }
            })
		},
		// 全部模板下拉重新加载
		allUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getAllList(page)
                }
            })
        },
		// 男士模板下拉重新加载
		manUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getManList(page)
                }
            })
        },
		// 女士模板下拉重新加载
		womenUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getWomenList(page)
                }
            })
        },
        upCallback({callback}) {
            typeof callback === 'function' && callback(true)
        },
        downCallback({callback}) {
            setTimeout(() => {
                typeof callback === 'function' && callback(true)
			}, 300)
        },
        // 获取所有模板
        getAllList(page) {
            getBusCardInfo({
                page: page.num,
                pageSize: page.size,
            })
            .then(res => {
                console.log("获取所有模板 res：", res)
                if (res.errcode == 0) {
                    this.$emit('addOptList', {
                        id: 'all',
                        list: res.data.TemplateItem || []
                    })
                    this.mescroll['all'].endBySize(res.data.TemplateItem.length || 0, res.total || 0)
                    if (res.data.UserDefaultTemplateItem) {
                        this.chooseTemp(res.data.UserDefaultTemplateItem)
                    }
                } else {
                    failTextVantToa(res.message)
                    const list = this.optionData['all'].list
                    if (list.length === 0) {
                        this.mescroll['all'].endBySize(0, 0)
                    } else {
                        this.mescroll['all'].endErr()
                    }
                }
            }, res => {
                console.log("fail: res", res)
                if (res.errcode != 2000) {
                    failTextVantToa("服务器正在修整，请稍后")
                }
                this.mescroll['all'].endErr()
            })
            .catch(res => {
                console.log("catch：res", res)
                failTextVantToa("服务器正在修整，请稍后")
                this.mescroll['all'].endErr()
            })
        },
        // 获取男士模板
        getManList(page) {
            // console.log("getManList page", page)
            getBusCardInfo({
                page: page.num,
                pageSize: page.size,
                type: 1
            })
            .then(res => {
                console.log("获取男士模板 res：", res)
                if (res.errcode == 0) {
                    this.$emit('addOptList', {
                        id: 'man',
                        list: res.data.TemplateItem || []
                    })
                    this.mescroll['man'].endBySize(res.data.TemplateItem.length || 0, res.total || 0)
                    if (res.data.UserDefaultTemplateItem) {
                        this.chooseTemp(res.data.UserDefaultTemplateItem)
                    }
                } else {
                    failTextVantToa(res.message)
                    const list = this.optionData['man'].list
                    if (list.length === 0) {
                        this.mescroll['man'].endBySize(0, 0)
                    } else {
                        this.mescroll['man'].endErr()
                    }
                }
            }, res => {
                console.log("fail: res", res)
                if (res.errcode != 2000) {
                    failTextVantToa("服务器正在修整，请稍后")
                }
                this.mescroll['man'].endErr()
            })
            .catch(res => {
                console.log("catch：res", res)
                failTextVantToa("服务器正在修整，请稍后")
                this.mescroll['man'].endErr()
            })
        },
        // 获取女士模板
        getWomenList(page) {
            getBusCardInfo({
                page: page.num,
                pageSize: page.size,
                type: 2
            })
            .then(res => {
                console.log("获取女士模板 res：", res)
                if (res.errcode == 0) {
                    this.$emit('addOptList', {
                        id: 'women',
                        list: res.data.TemplateItem || []
                    })
                    this.mescroll['women'].endBySize(res.data.TemplateItem.length || 0, res.total || 0)
                    if (res.data.UserDefaultTemplateItem) {
                        this.chooseTemp(res.data.UserDefaultTemplateItem)
                    }
                } else {
                    failTextVantToa(res.message)
                    const list = this.optionData['women'].list
                    if (list.length === 0) {
                        this.mescroll['women'].endBySize(0, 0)
                    } else {
                        this.mescroll['women'].endErr()
                    }
                }
            }, res => {
                console.log("fail: res", res)
                if (res.errcode != 2000) {
                    failTextVantToa("服务器正在修整，请稍后")
                }
                this.mescroll['women'].endErr()
            })
            .catch(res => {
                console.log("catch：res", res)
                failTextVantToa("服务器正在修整，请稍后")
                this.mescroll['women'].endErr()
            })
        },
        setMescrollList() {
            const keysArr = Object.keys(this.optionData)
            keysArr.forEach(item => {
                const upCallback = this.setUpLoadFn(this.optionData[item].id)
                const downCallback = this.setDownLoadFn(this.optionData[item].id)
                // console.log('that.optionData[item]', that.optionData[item])
                this.mescroll[item] = new MeScroll(this.optionData[item].id, {// 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
                    down: {
                        auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
                        callback: downCallback // 下拉刷新的回调
                    },
                    up: {
                        auto: this.active === this.optionData[item].id, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                        callback: upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                        page: {
                            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                            size: 20 // 每页数据的数量
                        },
                        noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                        toTop: { // 配置回到顶部按钮
                            src: this.img.scrollTopIcon
                        },
                        htmlNodata: '<p class="upwarp-nodata">已显示全部</p>',
                        empty: {
                            //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                            warpId:	`${this.optionData[item].id}-empty`, //父布局的id (1.3.5版本支持传入dom元素)
                            icon: this.img.emptyContentIcon, //图标,默认null,支持网络图
                            tip: "没有相关信息内容" //提示
                        },
                    }
                })
            })
        },
        chooseTemp(data, type="set") {
            console.log('chooseTemp data', data)
            if (data) {
                this.$emit('setActTempImg', {
                    createNo: data.CreateNo || data.createNo,
                    tplNo: data.TplNo || data.tplNo,
                    viewProject: data.ViewProject || data.viewProject,
                    defaultTxt: data.DefaultTxt || data.defaultTxt,
                    tplName: data.TplName || data.tplName,
                    tplType: data.TplType || data.tplType,
                    setType: data.SetType || data.setType,
                    tplImgUrl: data.TplImgUrl || data.tplImgUrl,
                    customTxtItem: data.CustomTxtItem || data.customTxtItem,
                }, type)
            }
        }
    },
    mounted() {
        this.setMescrollList()
    },
    computed: {
        optionData() {
            return Object.assign({}, this.option)
        },
    },
    watch: {
        'active'() {
            if (this.option[this.active].list.length === 0) {
                this.mescroll[this.active].triggerUpScroll()
            }
        }
    },
    components: {
        ImageVant,
    }
}
</script>

<style lang="scss" scoped>
.bus-card-list, .list, .list-ul {
    overflow-y: scroll;
}

.list {
    width: 100%;
    height: 100%;
}

.list-ul {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: space-between;

    .list-li {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        &:not(:last-child) {
            margin-bottom: 15px;
        }

        .img-temp-name {
            margin-top: 5px;
        }

        .selected {
            position: absolute;
            display: block;
            height: 278px;
            width: 159px;
            border-radius: 5px;
            border: 2px solid #0077bf;
            top: 0;
            left: 0;
            z-index: 1;

            .triangle-bottomright {
                width: 0;
                height: 0;
                border-bottom: 25px solid #0077bf;
                border-left: 25px solid transparent;
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 1;

                .triangle-bottomright-icon {
                    color: white;
                    top: 9px;
                    left: -15px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>